<template>
	<el-dialog title="评价" :visible.sync="centerDialogVisible" width="800px">
		<div>
			<vue-scroll :ops="ops" style="width:100%;height:180px">
				<div class="mainBox">
					<div class="txtPicBox">
						<div class="myrandomlyTxt flex">
							<p>2020-10-30</p>
							<span class="siteTxt">万州区甘宁镇</span>
						</div>
						<div class="imagesBox">
							<div class="imagesBoxList" v-for="item in 11">
								<el-checkbox  v-if="!upgradeNav" class="imageChecked"></el-checkbox>
								<el-image class="imgSize" :src="require('@/assets/image/management/guo.png')" fit="cover" alt=""></el-image>
							</div>
						</div>
					</div>
				</div>
			</vue-scroll>
			<div class="formBox">
				<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
					<el-form-item label="作物品种：">
						<el-input v-model="formInline.user" placeholder="作物品种"></el-input>
					</el-form-item>
					<el-form-item label="危害部位：">
						<el-input v-model="formInline.user" placeholder="危害部位"></el-input>
					</el-form-item>
					<el-form-item label="爆发范围：">
						<el-input v-model="formInline.user" placeholder="爆发范围"></el-input>
					</el-form-item>
				</el-form>
				<el-form :model="formInline" class="demo-form-inline-list" label-width="100px">
					<el-form-item label="发生时期：">
						<el-select v-model="formInline.region" placeholder="选择物候期">
						      <el-option label="区域一" value="shanghai"></el-option>
						      <el-option label="区域二" value="beijing"></el-option>
						    </el-select>
						<el-select v-model="formInline.region" placeholder="选择月&旬" style="margin-left: 15px;">
						      <el-option label="区域一" value="shanghai"></el-option>
						      <el-option label="区域二" value="beijing"></el-option>
						    </el-select>
					</el-form-item>
					<el-form-item label="病虫害诊断：">
						<el-row>
							  <el-col :span="7">
								 <el-input v-model="formInline.user" placeholder="溃疡病">
								 	<el-button slot="append" icon="el-icon-search"></el-button>
								 </el-input>
							</el-col>
							<el-col :span="17">
								 <el-select v-model="formInline.region" placeholder="选择月&旬" style="margin-left: 15px;">
								       <el-option label="区域一" value="shanghai"></el-option>
								       <el-option label="区域二" value="beijing"></el-option>
								 </el-select>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="典型图片：">
						<div class="modelImage">
							<el-image class="modelImageList" v-for="item in 10" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></el-image>
						</div>
					</el-form-item>
					<el-form-item label="危害方式：">
						<span class="formTip">成虫与若虫以刺吸式口器刺破叶片、果实等，吸取植物汁液。</span>
					</el-form-item>
					<el-form-item label="评价：">
						<div class="textareaBox">
							<el-input type="textarea" placeholder="请写下您的评价吧..." resize="none"></el-input>
						</div>
					</el-form-item>
				</el-form>
			</div>
			
			<!-- <div class="textareaBox">
				<el-input type="textarea" placeholder="请写下您的评价吧..." resize="none"></el-input>
			</div> -->
		</div>
		<span slot="footer" class="dialog-footer">
			<!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
			<el-button type="primary" class="textareaBoxBtn" round @click="centerDialogVisible = false">发表</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				// 滚动条样式设置
				ops: {
					vuescroll: {},
					scrollPanel: {},
					rail: {
						keepShow: true
					},
					bar: {
						hoverStyle: true,
						onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
						background: "#D6D8DD", //滚动条颜色
						opacity: 0.9, //滚动条透明度
						"overflow-x": "hidden"
					}
				},
				centerDialogVisible: false,
				upgradeNav: false,
				formInline: {}
			}
		},
		methods: {

		}
	}
</script>

<style scoped="scoped">
	/**主体内容 */
	.flex {
		display: flex;
		flex-wrap: nowrap;
	}

	.mainBox {
		width: 100%;
		background-color: #fff;
	}

	.txtPicBox {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	.myrandomlyTxt {
		position: relative;
		line-height: 15px;
		text-align: center;
	}

	.myrandomlyTxt>p {
		/* width: 120px; */
		line-height: 15px;
		text-align: left;
		color: #333;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		margin-right: 20px;
	}

	.siteTxt {
		box-sizing: border-box;
		color: #AAAAAA;
		color: #aaa;
		font-size: 12px;
	}

	.imagesBox {
		padding: 15px 0;
	}

	.imagesBoxList {
		position: relative;
		display: inline-block;
		margin-left: 2px;
		margin-bottom: 2px;
	}

	.imageChecked {
		position: absolute;
		top: 8px;
		left: 8px;
	}

	.imgSize {
		width: 148px;
		height: 148px;
		cursor: pointer;
	}

	.imagesBoxList>>>.el-checkbox__input .el-checkbox__inner {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.imagesBoxList>>>.el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #23B14D !important;
	}

	.textareaBox {
		/* margin-top: 30px; */
	}

	.textareaBox>>>textarea.el-textarea__inner {
		height: 160px;
	}

	.textareaBoxBtn {
		width: 200px;
	}
	.formBox{
		margin-top: 15px;
	}
	.demo-form-inline>>>.el-input--small{
		width: 143px;
	}
	.formTip{
		color: #AAAAAA;
		font-size: 12px;
	}
	.modelImageList{
		width: 120px;
		height: 120px;
		display: inline-block;
		cursor: pointer;
		margin-right: 4px;
	}
	.modelImage{
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
	}
</style>

<style>
	.el-dialog__footer {
		text-align: center;
	}
	.el-dialog{
		margin-top: 2vh !important;
	}
</style>
